<template>
	<view>
		<div id="map" :style="{width: '100%', height: '100%'}"></div>
	</view>
</template>

<script>
	import * as echarts from "echarts";
	import "echarts-gl";
	export default {
		data() {
			return {};
		},
		mounted() {
			this.getEarth();
		},
		methods: {
			getEarth() {
				var chart = echarts.init(document.getElementById("map"));
				var ROOT_PATH =
					"https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples";
				chart.setOption({
					backgroundColor: '',
					globe: {
						baseTexture: ROOT_PATH + "/data-gl/asset/world.topo.bathy.200401.jpg",
						heightTexture: ROOT_PATH + "/data-gl/asset/world.topo.bathy.200401.jpg",
						displacementScale: 0.04,
						shading: "realistic",
						environment: ROOT_PATH + '/data-gl/asset/starfield.jpg',
						// environment: "/static/bg.png",
						displacementQuality: "high",
						realisticMaterial: {
							roughness: 0.02,
						},
						postEffect: {
							enable: true,
						},
						light: {
							main: {
								intensity: 5,
								shadow: true,
							},
							ambientCubemap: {
								texture: ROOT_PATH + "/data-gl/asset/pisa.hdr",
								diffuseIntensity: 0.2,
							},
						},
					},
				});
			},
		}
	};
</script>

<style lang="scss">
</style>
